{{extend '../_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}

{{block 'body'}}
<section class="container">
  {{include '../_partials/settings-nav.html'}}
  <div class="col-md-5">
    <form action='profile' method="post" id="profile_form">
      <input type="hidden" value="{{ userSession._id }}" name="id">
      <div class="form-group">
        <label for="exampleInputEmail1">账号</label>
        <input type="text" value="{{ userSession.email }}" readonly class="form-control" id="exampleInputPassword1" placeholder="">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">昵称</label>
        <input type="text" value="{{ userSession.nickname }}" readonly class="form-control" id="exampleInputPassword1" placeholder="">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">介绍</label>
        <input type='text' class="form-control" value="{{ userSession.bio }}" name="bio" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">我的帖子</label>
          {{ each comments }}
          <h5 style="border-bottom: 1px solid black;display: flex;justify-content: space-between;"> 
            <a href="/viewComment?comment_id={{ $value.id}} ">{{ $value.title }}</a>
            <a style="font-size: 12px;" href="/deleteComment?comment_id={{ $value.id }}">删除这个帖子</a>
          </h5>
          {{ /each }}
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">我的关注</label>
          {{ each focus }}
          <h5 style="border-bottom: 1px solid black;display: flex;justify-content: space-between;"> 
            <a href="/viewUser?user_id={{ $value.id}} ">
              {{ $value.nickname }}
            </a>
            <a  style="font-size: 12px;" href="/focusOff?user_id={{ $value.id }}">取消关注</a>
          </h5>
          {{ /each }}
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">我的粉丝</label>
          {{ each fans }}
          <h5 style="border-bottom: 1px solid black;display: flex;justify-content: space-between;"> 
            <a href="/viewUser?user_id={{ $value.id}} ">{{ $value.nickname }}</a>
          </h5>
          {{ /each }}
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">性别</label>
        {{ if userSession.gender === 0}}
        <div>
          <label class="radio-inline">
            <input type="radio" name="gender" checked id="inlineRadio1" value="0"> 男
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio2" value="1"> 女
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio3" value="-1"> 保密
          </label>
        </div>
        {{ /if }}
        {{ if userSession.gender === 1 }}
        <div>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio1" value="0"> 男
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" checked id="inlineRadio2" value="1"> 女
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio3" value="-1"> 保密
          </label>
        </div>
        {{ /if }}
        {{ if userSession.gender === -1 }}
        <div>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio1" value="0"> 男
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" id="inlineRadio2" value="1"> 女
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" checked id="inlineRadio3" value="-1"> 保密
          </label>
        </div>
        {{ /if }}
        
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">生日</label>
        <p class="">{{ userSession.birthday }}</p>
        <input type="button" class="editDate" value="点击修改生日">
        <input type="hidden" value="" name="birthday" class="form-control" id="editDate1" placeholder="">
      </div>
      <button type="submit" class="btn btn-success">保存</button>
    </form>
  </div>
  <div class="col-md-2 profile-avatar">
    <dl>
      <dt>头像设置</dt>
      <dd>
        <img class="avatar" width="150" height="150" src="{{ userSession.avatar }}" alt="">
        <div>
          <button class="btn btn-default" href="">Upload new picture</button>
        </div>
      </dd>
    </dl>
  </div>
</section>
<script src="/node_modules/jquery/dist/jquery.js"></script>
    <script>
      $('.editDate').click(function(){
        $('#editDate1').attr({'type':'date'})
      })
        $('#profile_form').on('submit', function(e) {
            //阻止默认提交方式
            e.preventDefault()
            //序列化表单数据
            var formData = $(this).serialize()
            $.ajax({
                url: '/profile',
                type: 'post',
                data: formData,
                dataType: 'json',
                success: function(data) {
                    var err_code = data.err_code
                    console.log(err_code);
                    
                    if(err_code === 0){
                        // window.alert('注册成功！')
                        // 服务端重定向针对异步请求无效
                        alert('修改成功！')
                        window.location.href='/profile'
                    }else{
                      alert('昵称不可用')
                    }
                }
            })
        })
        
    </script>
{{/block}}
